<template>
      <div class="mywrap">
            <!-- 头部 begin -->
            <header id="mine">
                  <div class="userEr"></div>
                  <div class="userMes"></div>
                  <img src="/static/img/mynew.png" alt="" class="mynew">
                  <div class="operateBox">
                        <div v-text="ifLogin" @click="flag && goLogin()" class="operate" :class="{bgNone:login}">登录/注册</div>
                        <div class="myPhone" v-show="login">153****9640</div>
                  </div>
                  <img src="/static/img/vip2.png" width="102px" style="float:right;margin-top:22px" v-show="login">
            </header>
           
            <ul class="myInfo">
                  <li class="infoItem">
                        <i class="myPoc"></i>
                              我的钱包
                  </li>
                  <li class="infoItem">
                        <i class="wq" v-show="!login">--</i>
                        <i class="wq" v-show="login">1</i>
                        优惠券
                  </li>
                  <li class="infoItem">
                        <i class="wq" v-show="!login">--</i>
                        <i class="wq" v-show="login">0.00</i>
                        白条
                  </li>
                  <li class="infoItem">
                        <i class="wq" v-show="!login">--</i>
                        <i class="wq" v-show="login">0</i>
                        鲜豆
                  </li>
            </ul>
            <!-- 头部 end -->
            <div class="liubai"></div>

            <!-- 主体部分 begin -->
            <div>
                  <div class="myredWrap">
                        <img :src="myList.imgSrc" alt="" class="myred">
                  </div>
                 <ul class="myItemsBox">
                       <li v-for="(list,index) in myList.children" :key="list.id" class="myItem" :class="index>7?'lineRemove':''">
                             <img :src="list.cimg" alt="" class="myItemImg">
                             <span>{{list.ctitle}}</span>
                       </li>
                 </ul>
            </div>

            <!-- 退出登录 begin -->
            <div class="loginout" @click="loginout" v-show="login">退出登录</div>
            <!-- 退出登录 end -->
            <!-- 主体部分 end -->
             <!-- 底部导航栏begin -->
            <footer class="navFooterBox">
              <router-link to="/index" class="navFooter footerFirst">首页</router-link>
              <router-link to="/index/list" class="navFooter footerSec">分类</router-link>
              <router-link to="/index/cart" class="navFooter footerThird">购物车</router-link>
              <router-link to="/index/order" class="navFooter footerForth">订单</router-link>
              <router-link to="/index/mine" class="fiveSelect">我的</router-link>
            </footer>
            <!-- 底部导航栏end -->
      </div>
</template>
<script>
export default {
      data(){
            return {
                  myList:{},
                  ifLogin:'登录/注册',
                  login:false,
                  flag:true,
            }
      },
      methods:{
            // 主体部分模块请求
            getMyList(){
                  this.jq.get(this.apiurl+'/mine/list').done(result=>{
                        if(result.error==0){
                              this.myList=result.data
                        }
                  })
                 
            },
            // 退出登录
            loginout(){
                  localStorage.removeItem('username')
                  localStorage.removeItem('password')
                  this.$router.go(0)
            },
            // 跳转到登录页面
            goLogin(){
                  this.$router.push('/mine/login')
            }
      },
      created(){
            // 调用主体请求方法
            this.getMyList()
            // 判断本事存储是否有用户登录
           if(localStorage.username){
                 this.ifLogin=localStorage.username
                  //   显示退出登录模块   
                 this.login=true
                  //  取消绑定的点击事件    
                 this.flag=false
           }
            
      }
}
</script>
<style>
/*头部begin*/ 
#mine{
      width: 100%;
      height: 9.5rem;
      background:white url('/static/img/my.png') no-repeat center bottom;
      background-size:cover;
      box-sizing: border-box;
      padding-top: 2rem;
      overflow: hidden;
}
.userEr{
      width: 2rem;
      height: 2rem;
      background: url('/static/img/er.png') no-repeat center;
      background-size: 1.9rem;
      position: absolute;
      right: 4.3rem;
      top: 1.2rem;
}
.userMes{
      width: 2rem;
      height: 2rem;
      background: url('/static/img/mes.png') no-repeat center;
      background-size: 1.9rem;
      position: absolute;
      right: 1.2rem;
      top: 1.2rem;
}
.mynew{
      width: 5.1rem;
      display: inline-block;
      margin: 0 0 0 16px;
      border-radius: 50px;
      text-align: center;
      vertical-align: top
}
.operateBox{
      display: inline-block;
      color: white;
      overflow: hidden;
}
.operate{
      padding: 7px 10px;
      border-radius: 2px;
      font-size: 14px;
      background-color: #69c575;
      margin-top: 10px;
      box-sizing: border-box;
}
.myPhone{
      font-size: 16px;
      padding: 0 10px;
}
.bgNone{
      width: 6rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      background-color:transparent;
      margin-top: 0
}
.myInfo{
      display: flex;
      padding-bottom: 1rem;
      background: white;
      width: 100%;
}
.infoItem{
      width: 24%;
      box-sizing: border-box;
      text-align: center;
      padding: 1rem 0;
      height: 4.8rem;
      line-height: 2.4rem;
}
.myPoc{
      display: block;
      width: 2.2rem;
      height: 2.2rem;
      background:url('/static/img/packet.png') no-repeat center;
      background-size: 2.1rem auto;
      margin: 0 auto;
}
.wq{
      display: block;
      height: 25px;
      line-height: 25px;
      font-size: 14px;
      color: #323232;
    }
/*头部end*/ 
.liubai{
      width: 100%;
      height: 1rem;
      background-color: #F2F2F2
}

/*主体部分 begin*/ 
.myred{
      width: 100%;
      height: 75px;
}
.myItemsBox{
      display: flex;
      flex-wrap: wrap;
      background: white;
}
.myItem{
      width: 25%;
      padding: 1px 0 25px 0;
      border-bottom: 1px solid #e8e8e8;
      text-align: center;
      line-height: 35px;
     
}
.myredWrap{
      font-size: 0;
}
.myItemImg{
      display: block;
      width: 4rem;
      margin: 0 auto;
}
.lineRemove{
      border-bottom: none;
}
/*主体部分 end*/ 

/* 退出登录部分 begin */
.loginout{
      display: block;
      height: 46px;
      color: #ff5757;
      text-align: center;
      font-size: 16px;
      line-height: 46px;
      background-color: #fff;
      margin-top: 1rem;
}
/* 退出登录部分 end */

/*底部固定导航begin*/ 
      .navFooterBox{
            position: fixed;
            z-index: 801;
            left: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            height: 50px;
            background: #fff;
            border-top: 1px solid #d9d9d9;
            box-sizing: border-box;
            display: flex;
      }

      .navFooter{
            display:inline-block;
            width:20%;
            text-align: center;
            font-size: 12px;
            box-sizing: border-box;
            color:#555;
            padding-top: 2.4rem;
      }
      .footerFirst{
            background:url('/static/img/footer.png') no-repeat center -250px;
            background-size:2rem auto;
      }

      .footerSec{
            background: url('/static/img/footer.png') no-repeat center -300px;
            background-size:2rem auto;
      }
      .footerThird{
            background: url('/static/img/footer.png') no-repeat center -350px;
            background-size:2rem auto;
      }
      .footerForth{
            background: url('/static/img/footer.png') no-repeat center -400px;
            background-size:2rem auto;
      }
      .footerFive{
            background: url('/static/img/footer.png') no-repeat center -450px;
            background-size:2rem auto;
      }
      .fiveSelect{
            display:inline-block;
            width:20%;
            text-align: center;
            font-size: 12px;
            box-sizing: border-box;
            padding-top: 2.4rem;
            background: url('/static/img/footer.png') no-repeat center -200px;
            background-size:2rem auto;
            color: #39ac69;
      }
/*底部固定导航end*/ 
</style>


